<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Userinfo</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https:/cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="modifyUser">
    <form name="modifyUser">
        <div class="form-group">
            <label for="id">ID:</label>
            <input type="text" class="form-control" name="id" id="id" th:value = "${user.getId()}" disabled>
        </div>
        <div class="form-group">
            <label for="name">name:</label>
            <input type="text" class="form-control" name="name" id="name" th:value = "${user.getName()}">
        </div>
        <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="text" class="form-control" name="pwd" id="pwd" th:value = "${user.getPassword()}">
        </div>
        <div class="form-check">
            <label for="role">role:</label>
            <select class="form-control" name="role" id="role" th:value = "${user.getRole()}">
                <option th:selected = "${user.getRole() == 'admin'}" value="admin">admin</option>
                <option th:selected = "${user.getRole() == 'user'}" value="user">user</option>
            </select>
        </div>
        <div class="form-group">
            <table>
                <tr>
                    <th>证书</th>
                    <th>操作</th>
                </tr>
                <tr th:each="userImg:${userImgsList}">
                    <td>
                        <img th:src="${userImg.img}"/>
                    </td>
                    <td>
                        <input type="button" id="btnDel" value="删除图片" th:onclick="'javascript:delUserImg(\''+${userImg.id}+'\');'"/>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <button id="modify">modifyUser</button>
</div>
<script>
    function isBlank(str){
        if(str == "" || str == null || str == undefined){
            return true;
        }else{
            return false
        }
    }
    $("#modify").click(function(){
        var id = $("#id").val();
        var name = $("#name").val();
        var password = $("#pwd").val();
        var role = $("#role").val();
        if(isBlank(name)||isBlank(password)||isBlank(role)){
            window.confirm("请完善信息");
        }else{
            var param ={
                "id":id,
                "name":name,
                "password":password,
                "role":role
            };
            $.ajax({
                url:"/modifyUser",
                data:param,
                async:true,
                success:function f(result){
                    window.confirm(result.msg);
                    location.href = "users";
                }
            });
        }
    });
</script>
</body>
</html>